<template>
  <div style="position: relative">
    <div class="compilation-and-vlist">
      <div style="font-size: 18px;">
        <span @click="returnCompilation" style="cursor: pointer">我的合集和视频列表</span>
        <span style="margin: 0 10px;font-size: 16px;color: #9499a0" class="iconfont icon-icon-xiangyou1"></span>
        <span>{{compilation.compilationName}}</span>
      </div>
      <div style="margin-top: 30px;color: #99a2aa;font-size: 12px">
        {{compilation.count}}个视频 | {{compilation.date}} 更新
      </div>
      <div class="channel-right">
        <el-popover
            width="120px"
            placement="bottom-end"
            popper-class="el-popover-self-four"
            trigger="click">
          <template #reference>
            <div class="channel-select">
              <span class="iconfont icon-caidan"></span>
            </div>
          </template>
          <ul class="ul-dropdown-item">
            <li class="be-dropdown-item-delimiter">删除视频列表</li>
          </ul>
        </el-popover>
        <div class="channel-option">
          <span style="font-size: 12px;margin-right: 5px" class="iconfont icon-bianji1"></span>编辑
        </div>
        <div class="be-tab">
          <ul class="be-tab-inner clearfix">
            <li :class="['be-tab-item',{isActive:isActive==1}]" @click="barOffset=0;isActive=1">
              <span>默认排序</span>
            </li>
            <li :class="['be-tab-item',{isActive:isActive==2}]" @click="barOffset=77;isActive=2">
              <span>升序排序</span>
            </li>
          </ul>
          <div class="be-tab-cursor" :style="barStyle"></div>
        </div>
      </div>
    </div>
    <!--合集里的视频item-->
    <compilation-edit-item :list="videoList"></compilation-edit-item>
  </div>
</template>

<script>
import CompilationEditItem from "@/components/personalHomepageComponent/tabs/compilationEditItem";
export default {
  /**各个合集*/
  name: "compilationEdit",
  props:{
    compilation:{
      type:Object,
      default:()=>({})
    }
  },
  components:{CompilationEditItem},
  data(){
    return{
      // 标签偏移量
      barOffset: 0,
      isActive: 1,
      videoList:[],
      // 模拟后端的数据
      videoList2:[
        {id:1},
        {id:2},
        {id:3},
        {id:4},
        {id:5},
        {id:6},
        {id:7},
        {id:8},
        {id:9},
      ],
      deleteVideo:false,

    }
  },
  computed: {
    // 动态计算标签默认宽度和偏移量
    barStyle() {
      return {
        width: '56px',
        transform: `translate3d(${this.barOffset}px,0px,0px)`
      }
    },
  },
  created() {
    // 组件加载向后端查询该合集中的视频
    if (JSON.stringify(this.compilation) !== '{}'){
      this.queryCompilationVideoList()
    }
  },
  methods:{
    // 页面加载初始化数据
    queryCompilationVideoList(){
      console.log('加载数据',this.compilation)
      // TODO 按合集id来查询视频，并分页

      this.videoList = this.videoList2
    },
    openDialog(){},
    // 返回合集列表主页
    returnCompilation(){
      this.$emit('returnCompilation')
    },
  },
}
</script>
<style>
.el-popover.el-popper.el-popover-self-four {
  min-width: 130px !important;
  padding: 5px 0;
  width: 130px !important;
  background-color: #fff;
}
</style>
<style scoped>
.compilation-and-vlist{
  padding-bottom: 20px;border-bottom: 1px solid #eee;margin-bottom: 10px;position: relative;
}
.ul-dropdown-item {
  list-style: none;
}

.be-dropdown-item-delimiter {
  padding: 5px 15px;
  text-align: center;
  font-size: 14px;
  color: #222;
  cursor: pointer;
}

.be-dropdown-item-delimiter:hover {
  color: #00a1d6;
  background-color: #e5e9ef;
}
.channel-right{
  overflow: hidden;
  position: relative;
}
.channel-select{
  float:right;font-size: 12px;color: #c4c4c4;border-radius: 4px;cursor:pointer;
  border: 1px solid #eee;text-align: center;width: 28px;height: 28px;line-height: 28px;margin-left: 25px
}
.channel-option {
  margin-left: 5px;
  float:right;font-size: 12px;width: 110px;height: 28px;line-height: 28px;cursor: pointer;
  background-color: #00a1d6;color: white;border-radius: 4px;text-align: center;
}
.channel-option:hover{
  /*变亮一点*/
  background-color: #00b5e5;
}

.be-tab {
  position: relative;
  float: right;
  margin-left: 20px;
}
.be-tab-inner{
  list-style: none;
  display: block;
}
.clearfix{
  zoom: 1;
}
.be-tab-item {
  float: left;
  font-size: 14px;
  margin-right: 20px;
  line-height: 28px;
  vertical-align: top;
  cursor: pointer;
}
.be-tab-cursor:after {
  content: "";
  left: 55%;
  transform: translateX(-50%);
  margin-left: -3px;
  border-bottom: 3px solid #00a1d6;
  border-top: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}
.be-tab-cursor:after {
  position: absolute;
  bottom: 0;
  height: 0;
  width: 0;
}
.be-tab-cursor{
  left: 0;
  border-bottom: 1px solid #00a1d6;
  transition: width .2s ease,transform .2s ease;
}
.isActive {
  color: #00a1d6;
}
</style>
